let _Vue = null;

export class VueRouter {
    static install (Vue) {
        //1.判断插件是否安装
        if(VurRouter.install.installed){
            return
        }
        VueRouter.install.installed = true;
        //2.把 Vue 构造函数记录到全局变量
        _Vue = Vue;
        //3.把创建 Vue 实例时传入的 router 对象注入到 Vue 实例上
        _Vue.mixin({
            beforeCreate(){
                if(this.$options.router){
                    _Vue.prototype.$router = this.$options.router;
                    this.$options.router.init();
                }
            }           
        })
    }

    constructor (options) {
          this.options = options;
          this.RouteMap = {};
          this.data = _Vue.observable({
              current: '/'
          });
    }

    init(){
        this.createRouteMap();
        this.initComponents(_Vue);
        this.initEvent();
    }

    createRouteMap(){
        //遍历所有的路由规则，解析成键值对的形式，都存储到 RouteMap 中
        this.options.routes.forEach(route => {
            this.routeMap[route.path] = route.component;
        })
    }

    initComponents (Vue) {
        Vue.component('router-link', {
            props:{
                to: String
            },
            //template: '<a :href="to"><slot></slot></a>'
            render(h){
                return h('a',{
                    attrs: {
                        href: '#' + this.to
                    },
                    on: {
                        click:this.clickHandler //注册点击事件
                    }
                }, [this.$slots.default])
            },
            methods: {
                clickHandler (e){
                    window.location.hash = '#' + this.to
                    this.$router.data.current = this.to
                    e.preventDefault()
                }
            }       
        })
        
        const self = this;
        Vue.component('router-view',{
            render(h) {
                const component = self.routeMap[self.data.current]
                return h(component) 
            }
        })
    }

    initEvent(){
        window.addEventListener('load', this.hashChange.bind(this));
        window.addEventListener('hashchange', this.hashChange.bind(this));
    }
}